<template>
	<view class="contont">
		<nav-bar :title="reacDatas.title" :iconLeft="true" />
		<view class="step">
			<up-tabs :list="actDatas.tab_list" lineWidth="25" @change="tab_change" :scrollable="false" />
		</view>
		<view class="step_zhanwei" />
		<view class="content-bgc" v-show="reacDatas.step_active == 1">
			<view class="b-con">
				<up-cell-group :border="false">
					<up-cell title="主视图">
						<template #value>
							<view class="cell-text" style="width: 70%;">
								<uni-file-picker v-model="reacDatas.imageValue" return-type="object"
									:del-icon="false"></uni-file-picker>
							</view>
						</template>
					</up-cell>
					<up-cell title="产品编号">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.code }} </view>
						</template>
					</up-cell>
					<up-cell title="产品名称">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.name }} </view>
						</template>
					</up-cell>
					<up-cell title="货品分类">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.classify_name }}</view>
						</template>
					</up-cell>
					<up-cell title="基本单位（小单位）">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.unit_main }}</view>
						</template>
					</up-cell>
					<up-cell title="基本单位销售单价(元)">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.unit_main_price }}</view>
						</template>
					</up-cell>
					<up-cell title="副单位1">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.unit_assist_one }}</view>
						</template>
					</up-cell>
					<up-cell title="副单位1与基本单位对应比例">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.unit_assist_one_ratio }}</view>
						</template>
					</up-cell>
					<up-cell title="副单位1销售单价(元)">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.unit_assist_one_price }}</view>
						</template>
					</up-cell>
					<up-cell title="副单位2">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.unit_assist_two }}</view>
						</template>
					</up-cell>
					<up-cell title="副单位2与副单位1对应比例">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.unit_assist_two_ratio }}</view>
						</template>
					</up-cell>
					<up-cell title="副单位2销售单价(元)">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.unit_assist_two_price }}</view>
						</template>
					</up-cell>
					<up-cell title="产品规格">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.royalties }}</view>
						</template>
					</up-cell>
					<up-cell title="生产物料用量">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.num }}</view>
						</template>
					</up-cell>
					<up-cell title="损耗率(%)">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.loss }}%</view>
						</template>
					</up-cell>
					<up-cell title="库存预警阈值">
						<template #value>
							<view class="cell-text">{{ reacDatas.detail_record.threshold }}</view>
						</template>
					</up-cell>
					<up-cell title="备注">
						<template #value>
							<view class="cell-text" style="width: 70%;">{{ reacDatas.detail_record.desc }}</view>
						</template>
					</up-cell>
				</up-cell-group>
			</view>
		</view>
		<view v-show="reacDatas.step_active == 2">
			<view style="background-color: #fff;">
				<up-cell-group :border="false">
					<up-cell title="物料类型">
						<template #value>
							<view class="cell-text">{{ bomstyle(reacDatas.detail_record.style) }}</view>
						</template>
					</up-cell>
				</up-cell-group>
			</view>
			<uni-card v-for="(item, index) in reacDatas.car_list" :key="index" :title="item.name" margin="8px" spacing="0">
				<view v-show="reacDatas.detail_record.style == 1">
					<view>供应商名称：{{ item.supplier_name }}</view>
					<view>联系方式：{{ item.phone }}</view>
					<view>基本单位采购单价：{{ item.num }}</view>
					<view class="con" style="align-items: normal;">
						<view style="flex: none;">主营业务：</view>
						<view>{{ item.business }}</view>
					</view>
					<view class="con" style="align-items: normal;">
						<view style="flex: none;">备注：</view>
						<view>{{ item.desc }}</view>
					</view>
				</view>
				<view v-show="reacDatas.detail_record.style == 2 || reacDatas.detail_record.style == 3">
					<view class="con">
						<view class="ctent">单次工价(元)：{{ item.price }}</view>
						<view class="ctent">单次完成时间(秒)：{{ item.finish_m }}</view>
					</view>
					<view class="con" style="align-items: normal;">
						<view class="ctent" style="flex: none;">工序要求：</view>
						<view class="ctent">{{ item.require }}</view>
					</view>
					<view class="con" style="align-items: normal;">
						<view class="ctent" style="flex: none;">备注：</view>
						<view class="ctent">{{ item.desc }}</view>
					</view>
				</view>

			</uni-card>
		</view>
	</view>
</template>
<script setup>
import dabomApi from '../../../api/dataa/da_bom'
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
onLoad((option) => {
	get_supplier_list(option.id)
})

const reacDatas = reactive({
	detail_record: {},
	imageValue: {},
	title: 'BOM物料详情',
	step_active: 1,
	car_list: []
})

const actDatas = {
	tab_list: [
		{
			name: '基本资料',
			status: 1
		}, {
			name: '物料类型',
			status: 2
		}]
}

//物料类型
function bomstyle(style) {
	if (style == 1) return '采购件';
	if (style == 2) return '自制品(半成品)';
	if (style == 3) return '委外件(半成品)';
}

function tab_change(v) {
	reacDatas.step_active = v.status
};
function get_supplier_list(id) {
	dabomApi.get_supplier({ page: 1, page_size: 99999, if_open: 1 }).then(res => {
		get_detail(id, res.results)
	})
};

function get_detail(id, list) {
	dabomApi.bom_detail(id).then(res => {
		reacDatas.detail_record = res
		if (res.style == 1) {
			reacDatas.car_list = JSON.parse(res.supplier_info).map(v => {
				const obj = list.find(k => k.id == v.supplier_id)
				return {
					supplier_name: obj?.name || '',
					...v
				}
			})
		}
		if (res.style == 2 || res.style == 3) {
			reacDatas.car_list = JSON.parse(res.process_info)
		}
		reacDatas.imageValue = {
			name: 'file.txt',
			extname: "txt",
			url: res.file_url,
		}
	})
};
</script>

<style lang="scss">
.step {
	width: 100%;
	background-color: #fff;
	position: fixed;
	z-index: 10;
	border-bottom: 1px solid #dadbde;
}

.step_zhanwei {
	height: 44px;
}
</style>